<template>
    <div>
        <div id="subPage">
            <div class="top">
                <div class="item top_left">
                    <div class="left_one_top">
                        <div class="left_one_top_left">
                            <div class="left_one_top_icon">
                                <img src="../../assets/images/ags/env/history_air.png" />
                            </div>
                            <div class="left_one_top_title">历史空气质量</div>
                        </div>
                        <div class="left_one_top_right">
                            <div v-for="(item, index) in historyTabList" @click="gethistoryItem(item)" :key="index" class="item_tab">
                                <span>{{ item.name }}</span>
                                <img :src="histype == item.type ? item.icon_hover : item.icon" />
                            </div>
                        </div>
                    </div>
                    <div class="left_one_center">
                        <div class="tabs_left">
                            <div :class="[activeTabs == 1 ? 'active' : '', 'tabs_left1']" @click="getDateValue(1)">近7天</div>
                            <div :class="[activeTabs == 2 ? 'active' : '', 'tabs_left2']" @click="getDateValue(2)">近30天</div>
                        </div>
                        <div class="tabs_right" @click="opendetail">查看详情</div>
                    </div>
                    <div class="left_one_bottom">
                        <div class="left_one_bottom_chart">
                            <div id="air_quality_cahrts"></div>
                        </div>
                        <div class="center_bg"></div>
                        <div class="left_one_bottom_list">
                            <vue-seamless-scroll ref="airqualityList" :data="airqualityList" :class-option="defaultOption">
                                <ul>
                                    <li v-for="(item, index) in airqualityList" :key="index">
                                        <em v-bind:style="{background: colorList[index]}"></em>
                                        <span style="width:0.6rem;font-size:0.14rem">{{ item.name }}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
                <div class="item top_center">
                    <div class="left_two_top">
                        <div class="items" v-for="(item, index) in tabList" :key="index" :class="tablabel == item.id ? 'active' : ''" @click="gettabValue(item)">
                            <div class="icon">
                                <div class="icon_flag">
                                    <img :src="item.url" />
                                </div>
                            </div>
                            <div class="text">
                                <div class="count">{{ item.num }}{{ item.unit }}</div>
                                <div class="count_type">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="left_two_bottom">
                        <div id="env_charts"></div>
                    </div>
                </div>
                <div class="item top_bottom">
                    <div class="left_three_top">
                        <div class="left_three_top_icon">
                            <img src="../../assets/images/ags/env/actualtime_air.png" />
                        </div>
                        <div class="left_three_top_title">实时空气质量</div>
                    </div>
                    <div class="left_three_content">
                        <div class="left_three_center">
                            <div class="left_three_left">
                                <div id="left_Dashboard" @click="isShow(1)"></div>
                            </div>
                            <div class="left_three_center">
                                <div id="center_Dashboard" @click="isShow(2)"></div>
                            </div>
                            <div class="left_three_right">
                                <div id="right_Dashboard" @click="isShow(3)"></div>
                            </div>
                        </div>

                        <div class="left_three_bottom" v-if="isShowtype == 1">
                            <div class="bottom_count">
                                <div class="item_count">0</div>
                                <div class="item_count">35</div>
                                <div class="item_count">75</div>
                                <div class="item_count">115</div>
                                <div class="item_count">150</div>
                                <div class="item_count">250</div>
                            </div>
                            <div class="bottom_silder">
                                <el-slider v-model="pm25Num" :min="0" :max="250" style=" width:420px"></el-slider>
                            </div>
                            <div class="bottom_title">
                                <div class="item_title">优</div>
                                <div class="item_title">良</div>
                                <div class="item_title">轻度污染</div>
                                <div class="item_title">中度污染</div>
                                <div class="item_title">重度污染</div>
                                <div class="item_title">严重污染</div>
                            </div>
                        </div>

                        <div class="left_three_bottom" v-if="isShowtype == 2">
                            <div class="bottom_count">
                                <div class="item_count">0</div>
                                <div class="item_count">120</div>
                                <div class="item_count">300</div>
                            </div>
                            <div class="bottom_silder">
                                <el-slider v-model="pmtspNum" :min="0" :max="300" style=" width:230px"></el-slider>
                            </div>
                            <div class="bottom_title">
                                <div class="item_title">优</div>
                                <div class="item_title">轻度污染</div>
                                <div class="item_title">严重污染</div>
                            </div>
                        </div>

                        <div class="left_three_bottom" v-if="isShowtype == 3">
                            <div class="bottom_count">
                                <div class="item_count">0</div>
                                <div class="item_count">50</div>
                                <div class="item_count">150</div>
                            </div>
                            <div class="bottom_silder">
                                <el-slider v-model="pm10Num" :min="0" :max="150" style=" width:230px"></el-slider>
                            </div>
                            <div class="bottom_title">
                                <div class="item_title">优</div>
                                <div class="item_title">轻度污染</div>
                                <div class="item_title">严重污染</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="item bottom_left">
                    <div class="bottom_left_top">
                        <div class="bottom_left_top_icon">
                            <img src="../../assets/images/ags/env/envc.png" />
                        </div>
                        <div class="bottom_left_top_title">环境监测</div>
                    </div>
                    <div class="bottom_left_bottom">
                        <div class="top_item">
                            <div class="top_unit_count">
                                <div class="counts">{{ pmtspNum }}<span>TSP</span></div>
                            </div>
                            <div class="top_unit_count">
                                <div class="counts">{{ pm10Num }}<span>PM10</span></div>
                            </div>
                            <div class="top_unit_count">
                                <div class="counts">{{ pm25Num }}<span>PM2.5</span></div>
                            </div>
                        </div>
                        <div class="bottom_charts">
                            <div id="env_monitor"></div>
                        </div>
                    </div>
                </div>
                <div class="item bottom_right">
                    <div class="bottom_right_top">
                        <div class="bottom_right_top_icon">
                            <img src="../../assets/images/ags/env/sunny.png" />
                        </div>
                        <div class="bottom_right_top_title">晴雨表</div>
                    </div>
                    <div class="bottom_right_bottom">
                        <div id="barometer"></div>
                    </div>
                </div>
            </div>
            <Modal v-model="showModel" title="详情" width="40%;" :mask-closable="false">
                <div style="margin:10px">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="triggerTime" align="center" label="报警时间"></el-table-column>
                        <el-table-column prop="detail" align="center" label="报警详情"></el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="tableData.length > 0">
                    <div class="float-right">
                        <Page
                            v-if="totalCount"
                            style="margin: 20px 0;text-align: center;"
                            :current.sync="current"
                            :total="totalCount"
                            :page-size="pageSize"
                            show-elevator
                            show-total
                            @on-change="pageChange"
                        ></Page>
                    </div>
                </div>
                <div slot="footer"></div>
            </Modal>
        </div>
        <div class="select-selection">
            <Select v-if="dataList.length > 0" :listData="dataList" :text="selectTxt" ref="select" @parents="getselectitem" />
        </div>
    </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Select from "./components/select.vue";
import {
    getenvlatest,
    getenvList,
    getenvLog,
    getenvLoganalysis,
    getenvwarnList,
    getenvweather
} from "@/api/md_board";
import {
    addDays,
    FMT_DATE_TIME,
    format,
    addMonths,
    getDateBeginStr,
    getDateEndStr
} from "@/sever/dateutil";
import { initColors } from "@/mixins/colorObj";
export default {
    mixins: [initColors],
    components: { vueSeamlessScroll, Select },
    data() {
        return {
            slderValue: 100,
            activeTabs: 1,
            enterDeviceList: [
                {
                    value: 1,
                    name: "装载机",
                    rate: "10%"
                },
                {
                    value: 1,
                    name: "装载机",
                    rate: "10%"
                },
                {
                    value: 1,
                    name: "装载机",
                    rate: "10%"
                },
                {
                    value: 1,
                    name: "装载机",
                    rate: "10%"
                },
                {
                    value: 1,
                    name: "装载机",
                    rate: "10%"
                }
            ],
            tableData: [],
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            showModel: false,
            colors: [
                { color: "#45CF3E" },
                { color: "#1544C0" },
                { color: "#01DDF3" },
                { color: "#FDF77B" },
                { color: "#FF6C00" },
                { color: "#E81A1A" }
            ],
            isShowtype: 2,
            styleColor: "#45CF3E",
            pmtspColor: "#45CF3E",
            pm10Color: "#45CF3E",
            data1: 0,
            data2: 0,
            data3: 0,
            deptId: "",
            dustId: "",
            dataList: [],
            selectTxt: "",
            datelabel: 1,
            dateTabList: [
                {
                    id: 1,
                    name: "近30天"
                },
                {
                    id: 2,
                    name: "近90天"
                }
            ],
            histype: "pm25",
            ruleType: 201,
            historyTabList: [
                {
                    type: "pm25",
                    name: "PM2.5",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                },
                {
                    type: "pm10",
                    name: "PM10",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                },
                {
                    type: "tsp",
                    name: "TSP",
                    icon: require("../../assets/images/ags/env/tab.png"),
                    icon_hover: require("../../assets/images/ags/env/tab_hover.png")
                }
            ],
            tablabel: 1,
            tabList: [
                {
                    id: 1,
                    url: require("../../assets/images/ags/env/voice.png"),
                    name: "噪音",
                    num: "",
                    unit: "db"
                },
                {
                    id: 2,
                    url: require("../../assets/images/ags/env/wind.png"),
                    name: "风速",
                    num: "",
                    unit: "m/s"
                },
                {
                    id: 3,
                    url: require("../../assets/images/ags/env/temperature.png"),
                    name: "温度",
                    num: "",
                    unit: "℃"
                },
                {
                    id: 4,
                    url: require("../../assets/images/ags/env/humidity.png"),
                    name: "湿度",
                    num: "",
                    unit: "%"
                }
            ],
            startTime: "", //开始时间
            endTime: "", //结束时间
            airqualityList: [], //空气质量数据
            endDate: "",
            stardate: "",
            noiseList: [], //噪音
            windSpeedList: [], //风速
            envTempList: [], //温度
            envRhList: [], //湿度
            timeData: [],
            pm25List: [], //pm25
            pm10List: [], //pm10
            pmtspList: [], //pmtsp
            envtypeTips: "噪音",
            pm10Num: 0,
            pm25Num: 0,
            pmtspNum: 0,
            dateList: [],
            precipitationList: [], //降水量
            windPowerList: [], //风力等级
            windDirectionList: [], //风向
            maxTemperatureList: [], //最高温
            minTemperatureList: [], //最低温
            circleDom: null,
            envLineDom: null,
            boardDom: null,
            environmentalDom: null,
            barometerDom: null
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
        defaultOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getenvList(); //获取环境设备列表
                this.getenvweather(); //获取晴雨表
            }
        }
    },
    methods: {
        leftDashboardCharts() {
            let chartDom = document.getElementById("left_Dashboard");
            let myChart = this.$echarts.init(chartDom);
            let option;
            option = {
                series: [
                    {
                        type: "gauge",
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 240,
                        radius: "100%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                        splitNumber: 10,
                        itemStyle: {
                            color: "#58D9F9",
                            shadowColor: "rgba(0,138,255,0.45)",
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 7
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 7,
                                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。                //轴线宽度,默认 30。
                                shadowBlur: 3, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                shadowColor: "#fff"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            // show: false,
                            width: "60%",
                            lineHeight: 20,
                            height: 20,
                            offsetCenter: [0, "-30%"],
                            valueAnimation: true,
                            formatter: function(value) {
                                return (
                                    "{value|" +
                                    value.toFixed(0) +
                                    "}\n{unit|PM2.5}"
                                );
                            },
                            rich: {
                                value: {
                                    fontSize: "0.16rem",
                                    fontWeight: "400",
                                    color: "#FFFFFF"
                                },
                                unit: {
                                    fontSize: "0.12rem",
                                    fontWeight: "400",
                                    color: "#7DBADE",
                                    padding: [-10, 0, 0, 0]
                                }
                            }
                        },
                        data: [
                            {
                                value: this.pm25Num
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        centerDashboardCharts() {
            let chartDom = document.getElementById("center_Dashboard");
            let myChart = this.$echarts.init(chartDom);
            let option;
            let name;
            if (this.pmtspNum < 120) {
                name = "优";
            } else if (this.pmtspNum > 120 && this.pmtspNum < 300) {
                name = "轻度污染";
            } else {
                name = "严重污染";
            }
            option = {
                series: [
                    {
                        type: "gauge",
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 300,
                        splitNumber: 8,
                        radius: "135%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["50%", "80%"], // 仪表盘位置(圆心坐标)
                        axisLine: {
                            show: false,
                            lineStyle: {
                                // width: 6,
                                color: [
                                    [
                                        0.1,
                                        new this.$echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "#0886D1"
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#29B5D9"
                                                }
                                            ]
                                        )
                                    ],
                                    [
                                        0.2,
                                        new this.$echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "#29B5D9"
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#21E6D2"
                                                }
                                            ]
                                        )
                                    ],
                                    [
                                        0.7,
                                        new this.$echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "#21E6D2"
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#7CFE78"
                                                }
                                            ]
                                        )
                                    ],
                                    [
                                        0.9,
                                        new this.$echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "#7CFE78"
                                                },
                                                {
                                                    offset: 0.6,
                                                    color: "#7EFF8B"
                                                }
                                            ]
                                        )
                                    ],
                                    [1, "#5BEE93"]
                                ]
                            }
                        },
                        pointer: {
                            icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                            length: "20%",
                            width: 10,
                            offsetCenter: [0, "-40%"],
                            itemStyle: {
                                color: "#5BEE93"
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: "auto",
                                width: 2
                            }
                        },
                        splitLine: {
                            show: false,
                            length: 10,
                            lineStyle: {
                                color: "auto",
                                width: 5
                            }
                        },
                        axisLabel: {
                            color: "#E9ECED",
                            fontSize: "0.16rem",
                            distance: -28,
                            formatter: function(value) {
                                if (value === 300) {
                                    return "300";
                                } else if (value === 150) {
                                    return "150";
                                } else if (value === 0) {
                                    return "0";
                                }
                                return "";
                            }
                        },
                        title: {
                            offsetCenter: [0, "-23%"],
                            fontSize: "0.15rem",
                            color: "#79D160"
                        },
                        detail: {
                            fontSize: "0.22rem",
                            offsetCenter: [0, "0%"],
                            valueAnimation: true,
                            formatter: function(value) {
                                return Math.round(value);
                            },
                            color: "#E9ECED"
                        },
                        data: [
                            {
                                value: this.pmtspNum,
                                name: name
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        rightDashboardCharts() {
            let chartDom = document.getElementById("right_Dashboard");
            let myChart = this.$echarts.init(chartDom);
            let option;
            option = {
                series: [
                    {
                        type: "gauge",
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 240,
                        radius: "100%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                        splitNumber: 10,
                        itemStyle: {
                            color: "#58D9F9",
                            shadowColor: "rgba(0,138,255,0.45)",
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 7
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 7,
                                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。                //轴线宽度,默认 30。
                                shadowBlur: 3, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                shadowColor: "#fff"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            // show: false,
                            width: "60%",
                            lineHeight: 20,
                            height: 20,
                            offsetCenter: [0, "-30%"],
                            valueAnimation: true,
                            formatter: function(value) {
                                return (
                                    "{value|" +
                                    value.toFixed(0) +
                                    "}\n{unit|PM10}"
                                );
                            },
                            rich: {
                                value: {
                                    fontSize: "0.16rem",
                                    fontWeight: "400",
                                    color: "#FFFFFF"
                                },
                                unit: {
                                    fontSize: "0.12rem",
                                    fontWeight: "400",
                                    color: "#7DBADE",
                                    padding: [-10, 0, 0, 0]
                                }
                            }
                        },
                        data: [
                            {
                                value: this.pm10Num
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        envMonitorCharts() {
            let chartDom = document.getElementById("env_monitor");
            let myChart = this.$echarts.init(chartDom);
            let option;

            option = {
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    left: "right",
                    data: [
                        {
                            name: "TSP",
                            textStyle: {
                                fontSize: "0.14rem",
                                color: "#F8C44F"
                            }
                        },
                        {
                            name: "PM10",
                            textStyle: {
                                fontSize: "0.14rem",
                                color: "#56CE9F"
                            }
                        },
                        {
                            name: "PM2.5",
                            textStyle: {
                                fontSize: "0.14rem",
                                color: "#5B8FF9"
                            }
                        }
                    ]
                },
                grid: {
                    left: "8%",
                    right: "3%",
                    bottom: "8%",
                    height: "75%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.timeData,
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#8DADC0"
                    }
                },
                yAxis: {
                    name: "dB",
                    type: "value",
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#324352",
                            width: 1,
                            type: "dashed"
                        }
                    },
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#8DADC0"
                        }
                    }
                },
                series: [
                    {
                        name: "TSP",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        itemStyle: {
                            color: "#F8C44F"
                        },
                        data: this.pmtspList
                    },
                    {
                        name: "PM10",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        itemStyle: {
                            color: "#56CE9F"
                        },
                        data: this.pm10List
                    },
                    {
                        name: "PM2.5",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        itemStyle: {
                            color: "#5B8FF9"
                        },
                        data: this.pm25List
                    }
                ]
            };

            option && myChart.setOption(option);

            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        airQualityCharts() {
            let leftChart = document.getElementById("air_quality_cahrts");
            let leftMyChart = this.$echarts.init(leftChart);
            let option;
            let name = [];
            let peiData = [];
            this.airqualityList.forEach(e => {
                name.push(e.name);
                let obj = {};
                if (parseFloat(e.percentage) != 0) {
                    obj.value = parseFloat(e.percentage);
                    obj.itemStyle = e.itemStyle;
                    obj.name = e.name;
                    peiData.push(obj);
                }
            });
            option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b} : {c} ({d}%)",
                    confine: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true }
                    }
                },
                series: [
                    {
                        name: "Area Mode",
                        type: "pie",
                        radius: ["20%", "82%"],
                        center: ["50%", "50%"],
                        roseType: "area",
                        itemStyle: {
                            borderRadius: 1
                        },
                        data: peiData,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        }
                    }
                ]
            };
            option && leftMyChart.setOption(option);
            window.addEventListener("resize", function() {
                leftMyChart.resize();
            });
        },
        initEnvCharts(data) {
            let chartDom = document.getElementById("env_charts");
            let myChart = this.$echarts.init(chartDom);
            let option;
            option = {
                tooltip: {
                    trigger: "axis"
                },
                title: {
                    text: "近24小时" + this.envtypeTips + "数据分析",
                    left: "3%",
                    textStyle: {
                        color: "#8DADC0",
                        fontWeight: "400",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontSize: "0.12rem"
                    }
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.timeData,
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#8DADC0"
                    }
                },
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "9%",
                    height: "80%",
                    containLabel: true
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: true //去除轴线
                    },
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#8DADC0"
                    },
                    splitLine: {
                        //分割线
                        lineStyle: {
                            color: "#324352",
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        data: data,
                        type: "line",
                        areaStyle: {},
                        smooth: true
                    }
                ]
            };

            option && myChart.setOption(option);

            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        //分页
        pageChange(index) {
            this.pageNum = index;
            this.getenvwarnList();
        },
        isShow(type) {
            this.isShowtype = type;
        },
        //获取报警详情列表
        getenvwarnList() {
            let params = {
                dustId: this.dustId,
                ruleType: this.ruleType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: this.startTime,
                endTime: this.endTime
            };
            getenvwarnList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //下拉款切换
        getselectitem(item) {
            this.selectTxt = item.name;
            this.dustId = item.id;
            this.initTime();
            this.initDate();
            this.getenvlatest();
        },
        //历史空气切换 pm值
        gethistoryItem(item) {
            this.histype = item.type;
            if (this.histype == "pm25") {
                this.ruleType = 201;
            }
            if (this.histype == "pm10") {
                this.ruleType = 202;
            }
            if (this.histype == "tsp") {
                this.ruleType = 208;
            }
            this.initTime(); //获取历史空气质量分析
        },
        //历史空气时间选择切换
        getDateValue(item) {
            if (item == 1) {
                this.activeTabs = 1;
            } else {
                this.activeTabs = 2;
            }
            // this.datelabel = item.id;
            this.initTime();
        },
        //打开详情
        opendetail() {
            this.showModel = true;
        },
        //获取环境设备列表
        getenvList() {
            this.dataList = [];
            let params = {
                deptId: this.deptId
            };
            getenvList(params).then(res => {
                if (res.code == 200) {
                    let arr = [];
                    let data = res.data.list;
                    data.forEach(e => {
                        if (e.deviceType == 5) {
                            let obj = {};
                            obj.id = e.id;
                            obj.name = e.name;
                            arr.push(obj);
                        }
                    });
                    this.dataList = arr;
                    this.selectTxt = this.dataList[0].name;
                    this.dustId = this.dataList[0].id;
                    this.initTime();
                    this.initDate();
                    this.getenvlatest(); //获取最新数据
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        // 获取历史质量空气分析
        getenvLoganalysis() {
            this.airqualityList = [];
            let params = {
                deptId: this.deptId,
                type: this.histype,
                startTime: this.startTime,
                endTime: this.endTime,
                dustId: this.dustId
            };
            getenvLoganalysis(params).then(res => {
                if (res.code == 200) {
                    let arr = [];
                    if (this.histype == "pm25") {
                        arr = res.data.pm25CountList;
                    }
                    if (this.histype == "pm10") {
                        arr = res.data.pm10CountList;
                    }
                    if (this.histype == "tsp") {
                        arr = res.data.tspCountList;
                    }
                    let airqualityList = arr;
                    if (airqualityList.length > 0) {
                        for (let i = 0; i < airqualityList.length; i++) {
                            let e = airqualityList[i];
                            if (parseFloat(e.percentage) != 0) {
                                let obj = {
                                    time: e.time,
                                    name: e.name,
                                    percentage: e.percentage,
                                    itemStyle: {
                                        normal: {
                                            color: this.colorList[i]
                                        }
                                    }
                                };
                                this.airqualityList.push(obj);
                            }
                        }
                        this.$refs.airqualityList.reset();
                    }
                    if (this.airqualityList.length == 0) {
                        this.airqualityList = [
                            {
                                value: 0,
                                name: "暂无数据",
                                percentage: "0%",
                                itemStyle: {
                                    normal: {
                                        color: this.colorList[0]
                                    }
                                }
                            }
                        ];
                    }
                    this.airQualityCharts();
                    // this.$nextTick(function() {
                    //     this.airQualityCharts();
                    // });
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },

        //中间部分切换tab
        gettabValue(item) {
            this.tablabel = item.id;
            this.envtypeTips = item.name;
            if (item.id == 1) {
                this.initEnvCharts(this.noiseList);
            }
            if (item.id == 2) {
                this.initEnvCharts(this.windSpeedList);
            }
            if (item.id == 3) {
                this.initEnvCharts(this.envTempList);
            }
            if (item.id == 4) {
                this.initEnvCharts(this.envRhList);
            }
        },
        //获取最新数据
        getenvlatest() {
            let params = {
                dustId: this.dustId
            };
            getenvlatest(params).then(res => {
                if (res.code == 200) {
                    this.tabList.forEach(e => {
                        if (e.id == 1) {
                            e.num = res.data.noise;
                        }
                        if (e.id == 2) {
                            e.num = res.data.windSpeed;
                        }
                        if (e.id == 3) {
                            e.num = res.data.envTemp;
                        }
                        if (e.id == 4) {
                            e.num = res.data.envRh;
                        }
                    });
                    this.pm10Num = parseInt(res.data.pm10);
                    this.pm25Num = parseInt(res.data.pm25);
                    this.pmtspNum = parseInt(res.data.tsp);
                    if (this.pm10Num <= 50) {
                        this.pm10Color = this.colors[0].color;
                    }
                    if (this.pmtspNum <= 120) {
                        this.pmtspColor = this.colors[0].color;
                    }
                    if (this.pm25Num <= 35) {
                        this.styleColor = this.colors[0].color;
                    }
                    if (this.pm25Num > 35 && this.pm25Num <= 75) {
                        this.styleColor = this.colors[1].color;
                    }
                    if (this.pm10Num > 50 && this.pm10Num <= 150) {
                        this.pm10Color = this.colors[2].color;
                    }
                    if (this.pmtspNum > 120 && this.pmtspNum <= 300) {
                        this.pmtspColor = this.colors[2].color;
                    }
                    if (this.pm25Num > 75 && this.pm25Num <= 115) {
                        this.styleColor = this.colors[2].color;
                    }
                    if (this.pm25Num > 115 && this.pm25Num <= 150) {
                        this.styleColor = this.colors[3].color;
                    }
                    if (this.pm25Num > 150 && this.pm25Num <= 250) {
                        this.styleColor = this.colors[4].color;
                    }
                    if (this.pm25Num > 250) {
                        this.styleColor = this.colors[5].color;
                    }
                    if (this.pm10Num > 150) {
                        this.pm10Color = this.colors[5].color;
                    }
                    if (this.pmtspNum > 300) {
                        this.pmtspColor = this.colors[5].color;
                    }
                    this.data1 = parseInt(
                        ((this.pmtspNum / 300) * 100).toFixed(2)
                    );
                    this.data2 = parseInt(
                        ((this.pm10Num / 150) * 100).toFixed(2)
                    );
                    this.data3 = parseInt(
                        ((this.pm25Num / 250) * 100).toFixed(2)
                    );
                    this.$nextTick(function() {
                        this.leftDashboardCharts();
                        this.centerDashboardCharts();
                        this.rightDashboardCharts();
                    });
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //获取环境历史数据
        getenvLog() {
            this.noiseList = [];
            this.windSpeedList = [];
            this.envTempList = [];
            this.envRhList = [];
            this.timeData = [];
            this.pm25List = [];
            this.pm10List = [];
            this.pmtspList = [];
            let params = {
                dustId: this.dustId,
                endTime: this.endDate,
                startTime: this.startDate
            };
            getenvLog(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    list.forEach(e => {
                        let time = e.time.split(" ")[1];
                        this.timeData.push(time);
                        this.noiseList.push(e.noise);
                        this.windSpeedList.push(e.windSpeed);
                        this.envTempList.push(e.envTemp);
                        this.envRhList.push(e.envRh);
                        this.pm25List.push(e.pm25);
                        this.pm10List.push(e.pm10);
                        this.pmtspList.push(e.tsp);
                    });
                    this.initEnvCharts(this.noiseList);
                    this.envMonitorCharts();
                    // this.$nextTick(function() {
                    //     this.initEnvCharts(this.noiseList);
                    //     this.environmental();
                    // });
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },

        //获取晴雨表
        getenvweather() {
            this.dateList = [];
            this.precipitationList = []; //降水量
            this.windPowerList = []; //风力等级
            this.windDirectionList = []; //风向
            this.maxTemperatureList = []; //最高温
            this.minTemperatureList = []; //最低温
            let params = {
                deptId: this.deptId
            };
            getenvweather(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    if (list.length > 0) {
                        list.forEach(e => {
                            this.dateList.push(e.date);
                            this.precipitationList.push(e.precipitation);
                            this.windPowerList.push(e.windPower); //风力
                            this.windDirectionList.push(e.windDirection); //级
                            this.maxTemperatureList.push(e.maxTemperature);
                            this.minTemperatureList.push(e.minTemperature);
                        });
                        this.$nextTick(function() {
                            this.barometer();
                        });
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        //晴雨表
        barometer() {
            let windDirectionList = this.windDirectionList;
            let date = this.dateList;
            let time = [];
            let timeData = [];
            date.forEach((e, i) => {
                var dateObject = new Date(e);
                var dates = dateObject.getDay();
                time.push(dates);
            });
            time.forEach((element, i) => {
                date.forEach((e, idx) => {
                    if (i == idx) {
                        if (idx == 0) {
                            e = e.substring(8) + "日" + "今天";
                        }
                        if (idx == 1) {
                            e = e.substring(8) + "日" + "明天";
                        }
                        if (idx == 2) {
                            e = e.substring(8) + "日" + "后天";
                        }
                        if (element == 0 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周天";
                        }
                        if (element == 1 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周一";
                        }
                        if (element == 2 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周二";
                        }
                        if (element == 3 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周三";
                        }
                        if (element == 4 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周四";
                        }
                        if (element == 5 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周五";
                        }
                        if (element == 6 && idx != 0 && idx != 1 && idx != 2) {
                            e = e.substring(8) + "日" + "周六";
                        }
                        timeData.push(e);
                    }
                });
            });
            let line = this.$echarts.init(document.getElementById("barometer"));
            line.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                },
                legend: {
                    padding: [10, 100, 0, 20],
                    left: "right",
                    icon: "circle",
                    itemWidth: 10,
                    itemHeight: 10,
                    data: [
                        {
                            name: "最高温",
                            textStyle: {
                                fontSize: "0.12rem",
                                color: "#C6E9FC"
                            }
                        },
                        {
                            name: "最低温",
                            textStyle: {
                                fontSize: "0.12rem",
                                color: "#C6E9FC"
                            }
                        },
                        {
                            name: "降水",
                            icon: "rect",
                            textStyle: {
                                fontSize: "0.12rem",
                                color: "#C6E9FC"
                            }
                        },
                        {
                            name: "风力",
                            textStyle: {
                                fontSize: "0.12rem",
                                color: "#C6E9FC"
                            }
                        }
                    ]
                },
                grid: {
                    left: "8%",
                    right: "8%",
                    top: "25%",
                    bottom: "0%",
                    containLabel: true
                },
                xAxis: {
                    data: timeData,
                    axisLabel: {
                        textStyle: {
                            fontSize: "0.12rem",
                            color: "#C6E9FC"
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#6BC9FF",
                            width: "1",
                            type: "solid"
                        }
                    }
                },
                yAxis: [
                    {
                        type: "value",
                        name: "降水" + "(mm)",
                        nameTextStyle: {
                            fontSize: "0.12rem"
                        },
                        splitLine: {
                            show: false
                        },
                        position: "right",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#6BC9FF",
                                width: "1",
                                type: "solid"
                            }
                        },
                        axisLabel: {
                            formatter: "{value}",
                            textStyle: {
                                fontSize: "0.12rem",
                                color: "#C6E9FC"
                            }
                        }
                    },
                    {
                        type: "value",
                        name: "风力" + "(级)",
                        nameTextStyle: {
                            fontSize: "0.12rem"
                        },
                        min: 0,
                        max: 16,
                        position: "right",
                        offset: 65,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#F5CD75",
                                width: "2",
                                type: "solid"
                            }
                        },
                        axisLabel: {
                            formatter: "{value}",
                            textStyle: {
                                fontSize: "0.12rem",
                                color: "#C6E9FC"
                            }
                        }
                    },
                    {
                        name: "温度" + "(℃)",
                        type: "value",
                        nameTextStyle: {
                            fontSize: "0.12rem"
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                                width: "1",
                                type: "solid"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#C6E9FC",
                                fontSize: "0.12rem"
                            }
                        }
                    }
                ],
                series: [
                    {
                        yAxisIndex: 2,
                        name: "最高温",
                        type: "line",
                        smooth: true,
                        color: "#FF8300",
                        // itemStyle: {
                        //     normal: {
                        //         label: {
                        //             show: true,
                        //             formatter: function(params) {
                        //                 return params.value + "℃";
                        //             },
                        //             textStyle: {
                        //                 color: "#fff",
                        //                 fontSize: 15
                        //             }
                        //         }
                        //     }
                        // },
                        symbol:
                            "image://" +
                            "",
                        symbolSize: 20,
                        data: this.maxTemperatureList,
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(255, 131, 0, 0.5)" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255, 131, 0,0)" // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    {
                        yAxisIndex: 2,
                        name: "最低温",
                        type: "line",
                        smooth: true,
                        color: "#1798E2",
                        // itemStyle: {
                        //     //---图形形状
                        //     normal: {
                        //         label: {
                        //             show: true,
                        //             formatter: function(params) {
                        //                 return params.value + "℃";
                        //             },
                        //             textStyle: {
                        //                 color: "#fff",
                        //                 fontSize: 15
                        //             }
                        //         }
                        //     }
                        // },
                        symbol:
                            "image://" +
                            "",
                        symbolSize: 20,
                        data: this.minTemperatureList,
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 90, 255, 0.5)" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 90, 255, 0)" // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    {
                        yAxisIndex: 0,
                        name: "降水",
                        type: "bar",
                        barWidth: 12, //柱图宽度
                        showBackground: false,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(107, 201, 255,1)"
                                    },
                                    {
                                        offset: 0.5,
                                        color: "rgba(107, 201, 255,0.8)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(107, 201, 255, 0)"
                                    }
                                ]
                            )
                        },
                        data: this.precipitationList
                    },
                    {
                        yAxisIndex: 1,
                        name: "风力",
                        type: "line",
                        symbol: "arrow",
                        symbolOffset: [0, -5, 5],
                        symbolSize: 12,
                        smooth: true,
                        data: this.windPowerList,
                        color: "#FDF77B"
                        // itemStyle: {
                        //     //---图形形状
                        //     normal: {
                        //         label: {
                        //             show: true,
                        //             formatter: function(params) {
                        //                 let text = "";
                        //                 windDirectionList.forEach((e, i) => {
                        //                     if (params.dataIndex == i) {
                        //                         if (
                        //                             e == 0 ||
                        //                             e == 1 ||
                        //                             e == 2
                        //                         ) {
                        //                             text = "东北风";
                        //                         }
                        //                         if (e == 3) {
                        //                             text = "东风";
                        //                         }
                        //                         if (
                        //                             e == 4 ||
                        //                             e == 5 ||
                        //                             e == 6
                        //                         ) {
                        //                             text = "东南风";
                        //                         }
                        //                         if (e == 7) {
                        //                             text = "南风";
                        //                         }
                        //                         if (
                        //                             e == 8 ||
                        //                             e == 9 ||
                        //                             e == 10
                        //                         ) {
                        //                             text = "西南风";
                        //                         }
                        //                         if (e == 11) {
                        //                             text = "西风";
                        //                         }
                        //                         if (
                        //                             e == 12 ||
                        //                             e == 13 ||
                        //                             e == 14
                        //                         ) {
                        //                             text = "西北风";
                        //                         }
                        //                         if (e == 15) text = "北风";
                        //                     }
                        //                 });
                        //                 return text + params.value + "级";
                        //             },
                        //             textStyle: {
                        //                 color: "#FDF77B",
                        //                 fontSize: 15
                        //             }
                        //         }
                        //     }
                        // }
                    }
                ]
            });
            this.barometerDom = line;

            window.addEventListener("resize", function() {
                line.resize();
            });
        },

        // 获取分析数据 和 报警数据
        initTime() {
            this.endTime = getDateEndStr();
            this.startTime = getDateBeginStr(
                addMonths(new Date(), -1),
                FMT_DATE_TIME
            );
            this.getenvLoganalysis(); //获取历史空气质量分析
            this.getenvwarnList(); //获取报警记录
        },
        /**
         * 获取历史数据
         */
        initDate() {
            this.startDate = format(addDays(new Date(), -1), FMT_DATE_TIME);
            this.endDate = format(new Date(), FMT_DATE_TIME);
            this.getenvLog(); //获取历史数据
        }
    },
    mounted() {
        this.leftDashboardCharts();
        this.centerDashboardCharts();
        this.rightDashboardCharts();
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getenvList(); //获取环境设备列表
        this.getenvweather(); //获取晴雨表
    }
};
</script>
<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
.select-selection {
    position: fixed;
    top: pxToRem(-65);
    width: pxToRem(220);
    left: 63%;
    z-index: 99999;
    cursor: pointer;
    pointer-events: all !important;
}
/deep/ #subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    overflow: hidden;
    pointer-events: auto !important;
    .top {
        width: 100%;
        height: 55%;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        .item {
            margin: pxToRem(-20);
        }
        .top_left {
            background-image: url("../../assets/images/ags/env/top_left.png");
            background-repeat: no-repeat;
            background-size: 100% 105%;
            width: pxToRem(570);
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            .left_one_top {
                display: flex;
                justify-content: space-between;
                width: 75%;
                margin-left: pxToRem(85);
                margin-top: pxToRem(35);
                .left_one_top_left {
                    display: flex;
                    justify-content: flex-start;
                    .left_one_top_icon{
                        img{
                            width: pxToRem(24);
                            height: pxToRem(24);
                        }
                    }
                    .left_one_top_title {
                        width: pxToRem(200);
                        height: pxToRem(24);
                        font-size: pxToRem(22);
                        font-family: SourceHanSansCN-Medium;
                        line-height: pxToRem(24);
                        color: #a8dfff;
                        margin-left: pxToRem(10);
                    }
                }
                .left_one_top_right {
                    display: flex;
                    justify-content: flex-start;
                    .item_tab {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                        text-align: center;
                        display: flex;
                        flex-flow: column;
                        cursor: pointer;
                    }
                }
            }
            .left_one_center {
                display: flex;
                justify-content: space-between;
                width: 75%;
                height: pxToRem(15);
                margin-left: pxToRem(85);
                margin-top: pxToRem(20);
                .tabs_left {
                    display: flex;
                    justify-content: flex-end;
                    // margin: pxToRem(25) pxToRem(60) pxToRem(20) 0;
                    font-size: pxToRem(12);
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #6bc9ff;
                    .tabs_left1 {
                        width: pxToRem(60);
                        height: pxToRem(26);
                        text-align: center;
                        line-height: pxToRem(26);
                        background-image: url("../../assets/images/ags/equip/left_tab.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        margin-right: pxToRem(-2);
                        cursor: pointer;
                        &.active {
                            background-image: url("../../assets/images/ags/equip/left_tab_hover.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            color: #062a3e;
                        }
                    }
                    .tabs_left2 {
                        width: pxToRem(60);
                        height: pxToRem(26);
                        text-align: center;
                        line-height: pxToRem(26);
                        background-image: url("../../assets/images/ags/equip/right_tab.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        cursor: pointer;
                        &.active {
                            background-image: url("../../assets/images/ags/equip/right_tab_hover.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            color: #062a3e;
                        }
                    }
                }
                .tabs_right {
                    font-size: pxToRem(12);
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #6bc9ff;
                    width: pxToRem(80);
                    height: pxToRem(26);
                    text-align: center;
                    line-height: pxToRem(26);
                    background-image: url("../../assets/images/ags/equip/right_tab.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }
            }
            .left_one_bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: pxToRem(390);
                height: pxToRem(300);
                margin: pxToRem(20) pxToRem(20) 0 pxToRem(80);
                .left_one_bottom_chart {
                    width: pxToRem(210);
                    height: pxToRem(210);
                    #air_quality_cahrts {
                        width: pxToRem(210);
                        height: pxToRem(210);
                    }
                }
                .center_bg {
                    position: absolute;
                    height: pxToRem(210);
                    width: pxToRem(210);
                    background-image: url("../../assets/images/ags/equip/ring.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    z-index: -1;
                    animation: turn 4s linear infinite;
                }
                .left_one_bottom_list {
                    max-height: pxToRem(120);
                    overflow: hidden;
                    margin-left: pxToRem(25);
                    ul {
                        width: 100%;
                        li {
                            width: 100%;
                            height: pxToRem(30);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            // margin: auto;
                            em {
                                width: pxToRem(7);
                                height: pxToRem(7);
                                margin-right: pxToRem(10);
                                border-radius: 50%;
                            }
                            span {
                                margin-right: pxToRem(5);
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
        }
        .top_center {
            background-image: url("../../assets/images/ags/env/top_center.png");
            background-repeat: no-repeat;
            background-size: 100% 105%;
            width: pxToRem(820);
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            .left_two_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(38);
                padding-top: pxToRem(30);
                .items {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    width: pxToRem(175);
                    margin: pxToRem(5);
                    height: pxToRem(90);
                    background-image: url("../../assets/images/ags/env/center_tab.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    .icon {
                        display: flex;
                        flex-flow: column nowrap;
                    }
                    .text {
                        margin-left: pxToRem(15);
                        .count {
                            font-size: pxToRem(16);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #00f0ff;
                        }
                        .count_type {
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #ffffff;
                        }
                    }
                    &.active {
                        background-image: url("../../assets/images/ags/env/center_tab_hover.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
            .left_two_bottom {
                width: 93%;
                height: 80%;
                margin-left: pxToRem(25);
                margin-top: pxToRem(15);
                #env_charts {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .top_bottom {
            background-image: url("../../assets/images/ags/env/top_right.png");
            background-repeat: no-repeat;
            background-size: 100% 105%;
            width: pxToRem(570);
            height: 100%;
            .left_three_top {
                display: flex;
                justify-content: flex-start;
                margin-left: pxToRem(55);
                margin-top: pxToRem(35);
                .left_three_top_icon{
                    img{
                        width: pxToRem(27);
                        height: pxToRem(24);
                    }
                }
                .left_three_top_title {
                    width: pxToRem(200);
                    height: pxToRem(24);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(24);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_three_content {
                display: flex;
                flex-flow: column nowrap;
                width: 85%;
                height: 80%;
                margin-left: 5%;
                .left_three_center {
                    display: flex;
                    justify-content: space-around;
                    align-items: flex-end;
                    width: 100%;
                    height: 50%;
                    margin-left: pxToRem(10);
                    margin-top: pxToRem(10);
                    .left_three_left {
                        width: 23%;
                        display: flex;
                        justify-content: center;
                        #left_Dashboard {
                            width: pxToRem(80);
                            height: pxToRem(80);
                        }
                    }
                    .left_three_center {
                        width: 49%;
                        display: flex;
                        justify-content: center;
                        #center_Dashboard {
                            width: pxToRem(340);
                            height: pxToRem(160);
                        }
                    }
                    .left_three_right {
                        width: 23%;
                        display: flex;
                        justify-content: center;
                        #right_Dashboard {
                            width: pxToRem(80);
                            height: pxToRem(80);
                        }
                    }
                }
                .left_three_bottom {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-flow: column nowrap;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    .bottom_count {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        font-size: pxToRem(14);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                        .item_count {
                            width: pxToRem(100);
                            text-align: center;
                        }
                    }
                    .bottom_silder {
                        width: pxToRem(400);
                        display: flex;
                        justify-content: center;
                        /deep/ .el-slider .el-slider__runway {
                            background-color: linear-gradient(
                                to right,
                                #57dc6e 0%,
                                #f73b4e 100%
                            ) !important;
                        }
                    }
                    .bottom_title {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        font-size: pxToRem(14);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                        .item_title {
                            width: pxToRem(100);
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
    .bottom {
        width: 100%;
        height: 45%;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        .bottom_left {
            height: 100%;
            width: pxToRem(916);
            background-image: url("../../assets/images/ags/env/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .bottom_left_top {
                display: flex;
                justify-content: flex-start;
                width: 75%;
                margin-left: pxToRem(35);
                margin-top: pxToRem(25);
                .bottom_left_top_icon{
                    img{
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .bottom_left_top_title {
                    width: pxToRem(200);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(24);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .bottom_left_bottom {
                display: flex;
                flex-flow: column nowrap;
                width: 100%;
                height: 80%;
                .top_item {
                    width: 40%;
                    display: flex;
                    justify-content: space-around;
                    margin: pxToRem(20) 0 pxToRem(0) pxToRem(70);
                    .top_unit_count {
                        width: pxToRem(100);
                        .counts {
                            font-size: pxToRem(20);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #00f0ff;
                            span {
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #a8dfff;
                            }
                        }
                    }
                }
                .bottom_charts {
                    width: 100%;
                    height: 100%;
                    #env_monitor {
                        width: 95%;
                        height: 100%;
                    }
                }
            }
        }
        .bottom_right {
            height: 100%;
            width: pxToRem(916);
            background-image: url("../../assets/images/ags/env/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .bottom_right_top {
                display: flex;
                justify-content: flex-start;
                width: 75%;
                margin-left: pxToRem(35);
                margin-top: pxToRem(25);
                .bottom_right_top_icon{
                    img{
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }   
                }
                .bottom_right_top_title {
                    width: pxToRem(200);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .bottom_right_bottom {
                flex: 1;
                width: 100%;
                height: 80%;
                #barometer {
                    width: 100%;
                    height: 90%;
                }
            }
        }
    }
}
@keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
/deep/ .el-slider__bar {
    background-color: transparent !important;
}
/deep/ .el-slider__button {
    width: pxToRem(12);
    height: pxToRem(12);
    border: 2px solid black;
    background-color: #fff;
    border-radius: 50%;
}
/deep/ .el-slider__runway {
    background: #1e9600 !important;
    background: -webkit-linear-gradient(
        to right,
        #1e9600,
        #fff200,
        #ff0000
    ) !important;
    background: linear-gradient(to right, #1e9600, #fff200, #ff0000) !important;
}
</style>
